<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0"/>
    <meta name="keywords" content="短网址接口,短网址,短网址API,短网址生成,缩短网址,url编码,缩短url,新浪云短网址" />
    <meta name="description" content="提供免费高质量短网址接口，支持json,xml,js,text格式。欢迎使用" />
    <title><%=title%></title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/normalize.css">
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="container">
    <section class="register">
        <h1>短网址服务</h1>
        <div style="text-align: center">
            <label>长地址:</label>&nbsp;
            <input type="text" name="url" style="width: 70%" class="input-text" id="url" value="" placeholder="请输入要转换的网络地址">
            <input type="submit" id="commit" class="input-submit submit" value="转换"/>
            &nbsp;
            <input type="button" id="qrcodeBtn" class="input-submit submit" value="二维码"/>
        </div>
        <div class="panel" id="panel">
            <div class="content" id="msgdiv">
                把地址复制到输入框,再按[转换]
            </div>
        </div>
        <div class="help">
            <p>json: http://<%=host%>/short_url.json?url={url}</p>
            <p> xml: http://<%=host%>/short_url.xml?url={url}</p>
            <p>  js: http://<%=host%>/short_url.jsonp?url={url}</p>
            <p>html: http://<%=host%>/short_url.text?url={url}</p>
            <p align="right" style="color:red;">E-mail: wapznw@qq.com</p>
        </div>
        <div style="line-height: 20px;">
            <p class="alert" style="margin-top: 20px;color: red;text-align:center;">
                最近发现部分违规网站使用本站服务,导致一些网友认为本站是违规网站。<br>
                所以添加了评论功能，如大家发现有违法使用的网站，欢迎在下面留言举报。<br>
                本站只是提供网址缩短服务,不对目标网址的内容负责。 -- 2016/05/22
            </p>
        </div>
        <hr/>
        <br/>
        <div id="uyan_frame"></div>
    </section>
</div>
<section class="about" style="color: #aaa;line-height:20px;">
    50R.CN&copy;2013 &nbsp;&nbsp; 本站已运行 <span id="runing_days"></span> 天
    <br>
    蜀ICP备14026093号-1
</section>
<div class="tips" id="tips">请稍等...</div>
<div class="qrCodeWindow">
    <div class="title">按 ESC 键或点击网页关闭</div>
    <div id="qrcode" style="padding: 20px;"></div>
    <div class="footer">新浪微博@dev_wdj</div>
</div>
<div class="marker" id="marker"></div>
<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/js/qrcode/jquery.qrcode.js"></script>
<script type="text/javascript" src="/js/qrcode/qrcode.js"></script>
<script type="text/javascript">
    //var QRCode = new TQCode();
    $(document).ready(function(){
        $('#commit').click(function(){
            var url = $('#url').val();
            if(url==""){
                showMsg('请填写长地址!');
                showTips('请填写长地址!',{timeout:3000,bgcolor:'red'});
            }else{
                getShortUrl(url);
            }
            trackEvent('点击','按钮','地址转换', url, 'commit');
        });

        if(isHttps()){
            $('.help p').each(function(){
                this.innerHTML = this.innerHTML.replace(/http:/i,'https:');
            });
        }

        $(document).bind('keyup',function(e){
            if(e.keyCode == 27){
                $('.qrCodeWindow').fadeOut();
                $('#marker').fadeOut();
                trackEvent('按键','弹起','关闭Dialog', 27,'marker');
            }
        });
        $('#marker').click(function(){
            $('.qrCodeWindow').fadeOut();
            $('#marker').fadeOut();
            trackEvent('点击','遮罩层','关闭Dialog', 'click','marker');
        });
        $('#qrcodeBtn').click(function(){
            var url = $('#url').val();
            qrcode(url);
            trackEvent('点击','按钮','生成二维码', '长地址','qrcodeBtn');
        });
    });

    function getShortUrl(url){
        $.ajax({
            url:'/ShortApi/Add?dataType=json&url='+encodeURIComponent(url)+'&random='+new Date().getTime(),
            processData:true,
            timeout:60000,
            beforeSend:function(XMLHttpRequest){
                G("commit").value = "转换中";
                G("commit").disabled = 1;
                showLoad("请稍等...正在为你炸转换",1);
                showTips("请稍等...正在为你炸转换",{bgcolor:'green'});
            },
            success:function(data, textStatus){
                //hideTips();
                if(textStatus=='success' && data.error==null && data.url!=null){
                    showTips('转换完成！',{bgcolor:'green',timeout:3000});
                    if(isHttps()){
                        data.url = data.url.replace(/http/i, 'https');
                    }
                    showMsg('转换短网址为:<br />'+data.url+" "+'<a href="'+data.url+'" target="_blank">点击访问</a> <a href="javascript:qrcode(\''+data.url+'\');">生成二维码</a>',0,1);
                }else{
                    showTips((data['error']?data.error:'转换过程中出现错误!'),{bgcolor:'red',timeout:3000});
                    showMsg((data['error']?data.error:'转换过程中出现错误!'));
                }
            },
            complete:function(XMLHttpRequest, textStatus){
                G("commit").value = "转换";
                G("commit").disabled = 0;
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                showTips("转换过程中出现错误!"+XMLHttpRequest.status,{bgcolor:'red',timeout:3000});
                showMsg("转换过程中出现错误!"+textStatus);
            }
        });
    }

    function showTips(msg,conf){
        var tips = $('#tips');
        conf = conf || {};
        if(conf.bgcolor){
            tips.css('background-color',conf.bgcolor);
        }
        if(conf.color){
            tips.css('color',conf.color);
        }
        tips.html(msg);
        if(conf.timeout){
            setTimeout(hideTips,conf.timeout);
        }
        tips.css({
            left:($(window).width() - tips.width())/2
        });
        tips.fadeIn();
    }

    function hideTips(){
        $('#tips').fadeOut();
    }

    function G(id){
        return document.getElementById(id);
    }

    function showMsg(msg,append,warp){
        var msgdiv = $("#msgdiv");
        if(warp){
            G("panel").className = "panel-overflow";
        }else{
            G("panel").className = "panel";
        }
        if(append){
            msgdiv.append('<br />'+msg);
        }else{
            msgdiv.html(msg);
        }
        G("panel").scrollTop=G("panel").scrollHeight;
    }
    function showLoad(msg,style){
        var msgdiv = G("msgdiv");
        if(style){
            G("panel").className = "loading";
            switch(style){
                case 1:
                    msgdiv.innerHTML='<span><img src="images/loadings.gif" alt="loading"/><br />'+msg+'</span>';
                    break;
            }
        }else{
            G("panel").className = "panel";
            msgdiv.innerHTML=msg;
        }
    }

    function qrcode(url){
        if(!url || url == '')return showTips('地址错误!',{
            bgcolor:'red',
            timeout: 3000
        });
        var qrCodeWindow = $('.qrCodeWindow');
        $('#marker').css({opacity:.5}).fadeIn();
        $('#qrcode').html('').qrcode({text:url,render:'table',foreground:'#000'});
        qrCodeWindow.css({
            top:($(window).height() - qrCodeWindow.height())/2,
            left:($(window).width() - qrCodeWindow.width())/2
        }).fadeIn();

    }

    function trackEvent(category,action,label,value,nodeid){
        if(typeof _czc !== "undefined" && 'push' in _czc){
            _czc.push(["_trackEvent",category,action,label,value,nodeid]);
        }else{
            console.log('----')
        }
    }

    function isHttps(){
        return document.URL.substr(0, 5) === 'https';
    }

    //计算天数差的函数，通用
    function  DateDiff(oDate1,  oDate2){    //sDate1和sDate2是2006-12-18格式
        var  aDate,  iDays;
        iDays  =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24);
        return  iDays
    }
    $('#runing_days').html(DateDiff(new Date('2013/10/12'), new Date()));
</script>

<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2100392"></script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1253205204'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/stat.php%3Fid%3D1253205204%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>